<script setup>
const props = defineProps({
  tabs: {
    type: Array,
    required: true,
    default: () => []
  },
  activeTab: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['tab-change']);

const switchTab = (index) => {
  emit('tab-change', index);
};
</script>

<template>
  <div class="form-tabs">
    <div class="tabs-container">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="['tab', { active: index === activeTab }]"
        @click="switchTab(index)"
      >
        <i v-if="tab.icon" :class="tab.icon" class="tab-icon"></i>
        <span class="tab-text">{{ tab.label }}</span>
      </div>
    </div>
    <div class="tab-slider">
      <div class="tab-slider-indicator" :style="{ transform: `translateX(${activeTab * 100}%)` }"></div>
    </div>
  </div>
</template>

<style scoped>
.form-tabs {
  margin-bottom: 30px;
  position: relative;
}

.tabs-container {
  display: flex;
  border-bottom: 1px solid #E5E7EB;
  position: relative;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 16px 0;
  cursor: pointer;
  font-weight: 500;
  color: #6B7280;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tab:hover {
  color: #00c389;
}

.tab.active {
  color: #00c389;
  font-weight: 600;
}

.tab-icon {
  font-size: 16px;
}

.tab-text {
  font-size: 16px;
}

.tab-slider {
  position: relative;
  height: 3px;
  margin-top: -2px;
}

.tab-slider-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 3px;
  background-color: #00c389;
  transition: transform 0.3s ease;
  border-radius: 3px 3px 0 0;
}
</style> 